<template>
  <div class="user-profile">
    <!-- 导航栏 -->
    <van-nav-bar
      class="app-nav-bar"
      title="个人信息"
      left-arrow
      @click-left="$router.back()"
    ></van-nav-bar>
    <van-cell title="头像" is-link center @click="isEditNameShow = true">
      <van-image width="30" height="30" round :src="user.photo"></van-image>
    </van-cell>
    <van-cell title="昵称" is-link :value="user.name"></van-cell>
    <van-cell
      title="性别"
      is-link
      :value="user.gender === 0 ? '男' : '女'"
      @click="isEditGenderShow = true"
    >
    </van-cell>
    <van-cell title="生日" is-link :value="user.birthday"></van-cell>

    <!-- 弹出层 -->
    <van-popup
      v-model="isEditNameShow"
      position="bottom"
      :style="{ height: '100%' }"
    >
      <!--
        当你传递给子组件的数据既要使用有要修改，例如这里的name 这种情况下我们可以使用 v-model简写
        :name = "user.name"
        @update-name="user.name = $event"

        v-model="user.name"
        默认传递一个名字叫 value  的数据
        :value = "user.name"
        默认监听 input事件 @input="user.name = $event"
     -->

      <!-- v-model  只能使用一次 -->
      <!-- 如果有多个数据需要保持同步， 使用， .sync修饰符
            :gender.sync = "user.gender"
            :gender = "user.gender"
            @update:gender = "user.gender = $event"
            @update:属性名称 = "user.gender = $event"

            我们一般把最常用的数据设计为 v-model绑定，把不太常用的数据设计为 .sync
      -->
      <update-name
        @close="isEditNameShow = false"
        @update-name="user.name = $event"
        :name="user.name"
      ></update-name>
    </van-popup>

    <!-- 修改性别 -->
    <van-popup
      v-model="isEditGenderShow"
      position="bottom"
      :style="{ height: '50%' }"
    >
      <update-gender @close="isEditGenderShow = false"></update-gender>
    </van-popup>
  </div>
</template>

<script>
import { getUserProfile } from '@/api/user'
import UpdateName from './components/update-name'
import UpdateGender from './components/update-gender'
export default {
  name: 'UserProfile',
  data () {
    return {
      user: {}, // 用户数据
      isEditNameShow: false,
      isEditGenderShow: false
    }
  },
  components: {
    UpdateName,
    UpdateGender
  },
  created () {
    this.loadUserProfile()
  },
  methods: {
    async loadUserProfile () {
      const { data } = await getUserProfile()
      this.user = data.data
    }
  }
}
</script>

<style scoped lang="less">
.van-popup {
  background-color: #f5f7f9;
}
</style>
